<template>
  <div id="home">
    <div>
      <!-- <div>
        <van-nav-bar
          title="请选择类别"
          left-text="返回"
          left-arrow
        />
      </div> -->
      <div style="width: 100%; padding:5% 10%">
        <h3>请选择类别</h3>
        <div class="wrap">
          <div id="box">
            <div id="marquee">{{ text }}</div>
            <div id="copy"></div>
          </div>
          <div id="node">{{ text }}</div>
        </div>
        <div class="holiday" @click="toDetail" v-if="showHoliday">节日专享</div>
        <van-row class="row" type="flex" justify="space-between">
          <van-col :span="11" v-for="(item, index) in demolist" :key="index" class="col" @click="toType(item)">
            {{ item.name }}
          </van-col>
        </van-row>
        <div class="van-ellipsis buy">
          <p @click="toHistory">+购买记录查询+</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as dd from 'dingtalk-jsapi'
const demolist = [
  {
    id: 1,
    name: '当季货品'
  },
  {
    id: 2,
    name: '往季货品',
    type: 'wj'
  },
  {
    id: 3,
    name: 'HOME专享券'
  },
  {
    id: 4,
    name: 'APN专享券'
  },
  {
    id: 5,
    name: '蓬马专享券'
  },
  {
    id: 6,
    name: '样衣内购券'
  }
]
export default {
  name: 'home',
  data() {
    return {
      msg: '',
      interval: null,
      demolist,
      text: '',
      showHoliday: false,
      type: 'holiday',
      lists: []
    }
  },
  mounted() {
    // localStorage.setItem('linkid', 192)
    // this.loadData()
    for (let i = 0; i < this.lists.length; i++) {
      this.text += ' ' + this.lists[i]
    }
    let that = this
    dd.ready(function () {
      dd.runtime.permission
        .requestAuthCode({
          corpId: 'ding8bac6beff1d2d841', // 企业id
          onSuccess: function (info) {
            let code = info.code // 通过该免登授权码可以获取用户身份
            that
              .$http({
                url: '/api/gateway/basemgt-purchase/login/auth',
                method: 'post',
                params: {
                  code: code
                },
                data: {
                  code: code
                }
              })
              .then(data => {
                if (data.success) {
                  localStorage.setItem('linkid', data.data)
                  that.loadData()
                } else {
                  that.$toast(data.msg)
                }
              })
          },
          onFail: function (err) {}
        })
        .catch(err => {
          console.log(err)
          alert(err)
        })
    })
  },
  computed: {
    linkid() {
      return localStorage.getItem('linkid')
    }
  },
  created: function () {
    document.title = '员工福利'
  },
  methods: {
    loadData() {
      this.$http({
        url: '/api/gateway/basemgt-purchase/purchase/index',
        method: 'post',
        params: {
          linkid: this.linkid
        },
        data: {
          linkid: this.linkid
        }
      }).then(data => {
        if (data.code == 200) {
          this.demolist.map(item => {
            if (item.id == 1) {
              item.number = data.data.pubDjfzNum + data.data.pubDjffzNum
            }
            if (item.id == 2) {
              item.number = data.data.pubWjNum
            }
            if (item.id == 3) {
              item.number = data.data.pubHomeNum
            }
            if (item.id == 4) {
              item.number = data.data.pubApnNum
            }
            if (item.id == 5) {
              item.number = data.data.pubPommeNum
            }
            return
          })
          const items =
            `当季服装可用${data.data.pubDjfzNum}件,` +
            `当季非服装可用${data.data.pubDjffzNum}件,` +
            `往季可用${data.data.pubWjNum}件,` +
            `HOME专享可用${data.data.pubHomeNum}件,` +
            `APN专享可用${data.data.pubApnNum}件,` +
            `POMME专享可用${data.data.pubPommeNum}件`
          this.msg = items
          this.lists.push(items)

          for (let i = 0; i < this.lists.length; i++) {
            this.text += ' ' + this.lists[i]
          }
          if (data.data.pubHolidayNum > 0) {
            this.showHoliday = true
          }
        } else {
          this.$toast(data.msg)
        }
      })
      console.log(this.demolist)
    },
    toType(item) {
      if (item.id == 2) {
        if (item.number <= 0) {
          this.$toast('内购券已用完！')
        } else {
          this.$router.push({ path: 'detail', query: { type: item.type } })
        }
      } else if (item.id == 6) {
        this.$toast('样衣内购券暂时不开放！')
      } else {
        if (item.number <= 0) {
          this.$toast('内购券已用完！')
        } else {
          this.$router.push({ path: 'type', query: { id: item.id } })
        }
      }
    },
    toDetail() {
      this.$router.push({ path: 'detail', query: { type: this.type } })
    },
    toHistory() {
      this.$router.push({ path: 'history' })
    },
    move() {
      // 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）
      let width = document.getElementById('node').getBoundingClientRect().width * 2
      let box = document.getElementById('box')
      let copy = document.getElementById('copy')
      copy.innerText = this.text // 文字副本填充
      let distance = 0 // 位移距离
      //设置位移
      setInterval(function () {
        distance = distance - 1
        // 如果位移超过文字宽度，则回到起点
        if (-distance >= width) {
          distance = 0
        }
        box.style.transform = 'translateX(' + distance + 'px)'
      }, 30)
    }
  },

  updated: function () {
    this.move()
  }
}
</script>
<style scoped>
#home {
  height: 100vh;
  background-image: url('./bg.jpg');
}
h3 {
  display: block;
  font-size: 30px;
  text-align: center;
  padding: 20px 0;
  color: #2c3e50;
  margin: 10px 0;
  font-weight: bold;
}
.row {
  width: 80%;
  margin: 50px auto;
}
.row .col {
  height: 100px;
  background: hsl(0deg 0% 100% / 60%);
  margin-bottom: 20px;
  line-height: 100px;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  color: #2c3e50;
}

.title {
  height: 22px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 20px;
  padding-left: 10px;
  border-bottom: 2px solid #646566;
}
.buy {
  position: absolute;
  bottom: 30px;
  width: 80%;
  left: 10%;
  border-bottom: 2px solid #646566;
}
.buy p {
  text-align: center;
  color: #2c3e50;
  font-size: 16px;
}
#msg {
  height: 24px;
  overflow: hidden;
}
.wrap {
  overflow: hidden;
  padding-bottom: 10px;
  border-bottom: 2px solid #646566;
}

#box {
  width: 80000%;
}
#box div {
  float: left;
}
#marquee {
  margin: 0 16px 0 0;
}
#node {
  position: absolute;
  z-index: -999;
  top: -999999px;
}
.holiday {
  text-align: center;
  height: 50px;
  background: #ff6c6c94;
  width: 150px;
  margin: 20px auto -30px;
  border-radius: 20px;
  line-height: 50px;
  font-size: 15px;
  font-weight: 500;
}
</style>